<template>
<view>
	<view class="pt" @click="showLink"><slot></slot></view>
	<el-dialog v-model="show" title="选择数据" width="1000px" :append-to-body="true">
		<view class="link-con flex">
			<view class="link-left" v-if="!scene">
				<view class="link-left-item" 
					v-for="(item,index) in navData" 
					:key="index"
					:class="type == item.key ?'active':''"
					@click="checkNav(item.key)"
				>
					{{item.name}}
				</view>
			</view>
			<view class="link-right">
				<view v-if="type == 'basic'" class="basic-item">
					<el-button class="mb12" 
						v-for="(item,index) in basicData" 
						:key="index"
						@click="selectBasicPath(item.path)"
					>
						{{item.name}}
					</el-button>
				</view>
				
				<view v-if="type == 'goods'">
					<el-table size="small" :data="info.list" row-key="_id" >
						<el-table-column prop="name" label="商品信息" width="300px">
							<template #default="scope">
								<view style="display: flex;">
									<el-image :preview-src-list="[scope.row.cover]" 
										:preview-teleported="true" 
										:src="scope.row.cover" 
										style="width: 32px;height: 32px;" 
										mode=""
									></el-image>
									<view class="goods-right" style="flex: 1;margin-left: 12px;">
										<view class="name">{{scope.row.name}}</view>
									</view>	
								</view>
							</template>
						</el-table-column>
						<el-table-column prop="price" label="价格">
							<template #default="scope">
								<span>￥{{scope.row.price}}</span>
								<span v-if="scope.row.is_open_sku">~￥{{scope.row.max_price}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="stock" label="库存" />
						<el-table-column prop="status" label="状态">
							<template #default="scope">
								<el-tag effect="dark" :type="scope.row.put_away == 1 ?'success':'info'">
									{{ scope.row.put_away == 1 ? '上架中':'已下架'}}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="create_time" label="操作">
							<template #default="scope">
								<el-button @click="selectLink(scope.row)">
									选择
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<view style="display: flex;justify-content: flex-end;" class="mt12">
						<el-pagination small background 
							v-model="info.page" 
							layout="prev, pager, next" 
							:total="info.count" 
							@prev-click="e=>getGoodsList(e)"
							@next-click="e=>getGoodsList(e)"
							@current-change="e=>getGoodsList(e)"
						/>
					</view>
				</view>
			
				<view v-if="type == 'article'">
					<el-table size="small" :data="info.list" row-key="_id" >
						<el-table-column prop="name" label="文章封面" width="80px">
							<template #default="scope">
								<image :src="scope.row.cover" style="width: 30px;height: 30px;" mode="aspectFit"></image>
							</template>
						</el-table-column>
						<el-table-column prop="title" label="文章标题" width="400px"/>
						<el-table-column prop="status" label="状态">
							<template #default="scope">
								<el-tag :type="scope.row.status == 1?'success':'info'" effect="dark" >
								  {{ scope.row.status == 1 ?'显示':'隐藏' }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="view_count" label="浏览次数"/>
						<el-table-column prop="create_time" label="操作">
							<template #default="scope">
								<el-button @click="selectLink(scope.row)">
									选择
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<view style="display: flex;justify-content: flex-end;" class="mt12">
						<el-pagination small background 
							v-model="info.page" 
							layout="prev, pager, next" 
							:total="info.count" 
							@prev-click="e=>getArticleList(e)"
							@next-click="e=>getArticleList(e)"
							@current-change="e=>getArticleList(e)"
						/>
					</view>
				</view>
			
				<view v-if="type == 'coupon'">
					<el-table size="small" :data="info.list" row-key="_id">
						<el-table-column prop="name" label="优惠券名称" />
						<el-table-column prop="low_price" label="优惠信息">
							<template #default="scope">
								<div>
									满<span style="color:#FF0066">{{scope.row.low_price}}</span>元减
									<span style="color:#FF0066">{{scope.row.coupon_price}}</span>元
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="count" label="已领取/总数量">
							<template #default="scope">
								<span>{{scope.row.receive_count}} / {{scope.row.count}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="状态">
							<template #default="scope">
								<el-tag :type="scope.row.status == 1?'success':'info'" effect="dark" >
								  {{ scope.row.status == 1 ?'启用':'禁用' }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="create_time" label="操作">
							<template #default="scope">
								<el-button @click="selectLink(scope.row)">
									选择
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<view style="display: flex;justify-content: flex-end;" class="mt12">
						<el-pagination small background 
							v-model="info.page" 
							layout="prev, pager, next" 
							:total="info.count" 
							@prev-click="e=>getCouponRowApi(e)"
							@next-click="e=>getCouponRowApi(e)"
							@current-change="e=>getCouponRowApi(e)"
						/>
					</view>
				</view>
			</view>
		</view>
	</el-dialog>
</view>
</template>

<script>
const pkGoods = uniCloud.importObject('pk-goods')
let db = uniCloud.database()
export default {
	name: 'pk-select-link',
	props:{
		scene:{
			type:String,
		},
		index:{
			type:Number,
			default:0
		}
	},
	data() {
		return {
			show:false,
			type:'basic',
			navData:[
				{name:'基础链接',key:'basic'},
				{name:'商品数据',key:'goods'},
				{name:'文章数据',key:'article'},
				{name:'优惠券',key:'coupon'},
			],
			basicData:[
				{name:'优惠券',path:'/pages/shop/coupon'},
				{name:'文章列表',path:'/pages/common/article/list'},
				{name:'商品列表',path:'/pages/shop/list'},
				{name:'积分商城',path:'/pages/marketing/integral/center'},
				{name:'收货地址',path:'/pages/common/address'},
				{name:'我的优惠券',path:'/pages/ucenter/my_coupon'},
				{name:'收藏夹',path:'/pages/shop/collect'},
				{name:'钱包',path:'/pages/ucenter/wallet/center'},
				{name:'分销中心',path:'/pages/marketing/distribution/center'},
			],
			
			info:{
				list:[],
				page:1,
				count:0,
			}
		}
	},
	mounted() {
		if( this.scene ){
			this.type = this.scene
			this.checkNav((this.type))
		}
	},
	methods: {
		showLink(){
			this.show = true
		},
		checkNav(key){
			this.type = key
			this.info.list =[]
			this.info.page = 1
			if( key == 'goods' ){
				this.getGoodsList(1)
			}
			if( key == 'article'){
				this.getArticleList(1)
			}
			if( key == 'coupon'){
				this.getCouponRowApi(1)
			}
		},
		
		async getGoodsList(page){
			let t = this
			try{
				let res = await pkGoods.getGoodsList(page,9)
				t.info.list = res.data.list
				t.info.count = res.data.count
				t.info.page = page
			}catch(e){
			}
		},
		
		async getArticleList(page){
			let t = this
			let res = await db.collection('pk-article')
			.skip((page-1)*8).limit(8).orderBy("update_time","desc").get()
			let count = await db.collection('pk-article').count()
			t.info.list = res.result.data
			t.info.count = count.result.total
		},
		
		async getCouponRowApi(page){
			let t = this
			try{
				t.info.loading = true
				let res = await db.collection('pk-goods-coupon')
					.skip((page-1)*8)
					.limit(8)
					.orderBy('create_time','desc')
					.get()
				let count = await db.collection('pk-goods-coupon').count()
				t.info.count = count.result.total
				t.info.list = res.result.data
				t.info.page = page
			}catch(e){
			}
		},
		
		selectLink(data){
			let t=this, type = t.type  ,path = ''
			if( !this.scene ){
				if( type == 'goods' ){
					path = '/pages/shop/goods_detail?goods_id='+data._id
				}
				if( type == 'article' ){
					path = '/pages/common/article/detail?id='+data._id
				}
				this.$emit('success',path)
				
			}else{
				this.$emit('success',{index:this.index,value:data})
			}
			this.show = false
		},
		selectBasicPath(path){
			this.$emit('success',path)
			this.show = false
		}
	}
}
</script>

<style lang="scss" scoped>
.link-con{
	width: 100%;
	height: 500px;
	border: 1px solid #eaeaea;
}
.link-left{
	width: 120px;
	height: 100%;
	border-right: 1px solid #eaeaea;
	
	&-item{
		width: 100%;
		height: 48px;
		text-align: center;
		line-height: 48px;
		border-bottom: 1px solid #eaeaea;
		cursor: pointer;
		
		&:hover{
			background: rgba(#3366FF, .2);
			color: #3366FF;
		}
	}
	.active{
		background: rgba(#3366FF, .2);
		color: #3366FF;
	}
	
}
.link-right{
	width: 70%;
	flex: 1;
	height: 100%;
	padding: 12px;
	overflow: hidden;
	overflow-y: auto;
}
</style>
